<template>
	<view :style="{ minHeight: `calc(100vh - ${tabBarHeight}px)` }" class="detailsStyle">
		<view class="example-body">
			<uni-title type="h2" :title="optionsData.noticeMehdCode_dictText || '- -'"></uni-title>
		</view>
		<text class="details_date">{{ optionsData.updateTime || '- -' }}</text>
		<uni-title type="h3" title="一、主要事项"></uni-title>
		<uni-title type="h4" :title="optionsData.noticeTitle"></uni-title>
		<uni-title type="h3" title="二、详细内容"></uni-title>
		<uni-title
			type="h4"
			:title="optionsData.noticeContent"
		></uni-title>

		<view class="details_bottom">
			<!-- <text>长沙县水利局</text> -->
			<text style="margin-top: 22rpx">{{ optionsData.createTime }}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabBarHeight: '',
			optionsData:''
		};
	},
	onLoad(options) {
		if (options.item) {
			this.optionsData = JSON.parse(decodeURIComponent(options.item));
			console.log(this.optionsData); // 现在可以使用传递的 item 数据
		}
		const tabBar = document.querySelector('.uni-page-head');
		this.tabBarHeight = tabBar.offsetHeight;
		console.log(`tabBar 高度为 ${this.tabBarHeight}px`);
	},
	methods: {}
};
</script>

<style scoped>
.detailsStyle {
	min-height: 100vh;
	width: 100%;
	padding: 22rpx;
	background: linear-gradient(to bottom, #e6f0ff, #fff);
}

.details_date {
	color: #9b9b9b;
}

.details_bottom {
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.details_bottom text {
	font-weight: 600;
}
</style>
